<template>
	<view class="pCenter">
		<u-modal v-model="show" content="是否需要截图" show-cancel-button @confirm="screenConfirm"></u-modal>
		<u-modal v-model="deleteImg" content="是否清除所有截图" show-cancel-button @confirm="deleteConfirm"></u-modal>
		<u-modal v-model="restartShow" content="是否需要重启设备" show-cancel-button @confirm="getlongRangeControl(1)"></u-modal>
		<u-modal v-model="resetShow" content="是否需要恢复出厂设备" show-cancel-button @confirm="getlongRangeControl(2)"></u-modal>
		<u-toast ref="uToast" />
		<view class="shot box_radius" style="margin-bottom: 20rpx;">
			<view class="screenshots box box-pack-between box-align-center">
				<view class="left">
					<view class="title" style="margin-left: 10rpx;">设备管理</view>
					<view class="txt box" style="margin-left: 10rpx;">远程重启平板电脑，或者恢复出厂设置</view>
				</view>
				<view class="right box">
					<u-button size="mini" :custom-style="app_btn" @click="restartShow = true">重启</u-button>
					<u-button size="mini" :custom-style="app_btn" style="margin-left: 10rpx;" @click="resetShow = true">重置</u-button>
				</view>
			</view>
		</view>
		<view class="shot box_radius">
			<!-- 截屏srat -->
			<view class="screenshots box box-pack-between box-align-center">
				<view class="left">
					<view class="title" style="margin-left: 10rpx;">远程截屏</view>
					<view class="txt box"><span class="textHiddens" :class="online ? 'green' : 'lines'"></span>
						{{online ? '当前设备在线，可以使用截屏功能' : '当前设备已离线，无法使用截屏功能'}}
					</view>
				</view>
				<view class="right">
					<u-button size="mini" :custom-style="app_btn" @click="screenShot" :disabled="onlineBtn">截屏
					</u-button>
				</view>
			</view>
		</view>
		<view class="clear_btn box box-pack-between box-align-center" v-if="list.length">
			<view>截屏日期：{{list[swiperIndex].create_time | newDate}}</view>
			<view @click="deleteImg = true">清除所有截屏</view>
		</view>
		<view class="checkImg" v-if="list.length">
			<u-swiper :list="list" img-mode="widthFix" height="940" mode="none" :current="swiperIndex"
				@change="swiperChange">
			</u-swiper>
		</view>
		<view class="refresh_btn">
			<u-button class="app_btn" :custom-style="app_btn" @click="getrefresh">刷新</u-button>
		</view>
	</view>
</template>

<script>
	import {
		querySnIdScreenshot,
		sendScreenshot,
		deleteScreenshot,
		addTimeControl,
		updateTimeControl,
		queryTimeControl,
		deleteTimeControl,
		longRangeControl
	} from '@/api/userHome.js'
	export default {
		data() {
			return {
				show: false,
				list: [],
				content: '',
				deleteImg: false,
				app_btn: {
					color: '#FFFFFF',
					'background-color': '#2979ff',
					'letter-spacing': '8rpx',
					'line-height': '80rpx',
					overflow: 'hidden',
					'border-radius': '60rpx'
				},
				swiperIndex: 0,
				timeout: 45 * 1000, //50秒一次心跳
				timeoutObj: null, //心跳心跳倒计时
				serverTimeoutObj: null, //心跳倒计时
				online: 0,
				restartShow: false,
				resetShow: false
			}
		},
		computed: {
			onlineBtn() {
				return this.online == 1 ? false : true
			}
		},
		onLoad() {
			if (uni.getStorageSync('snId')) {
				// this.linkSocket()
			}
		},
		onHide() {
			uni.closeSocket()
			that.close()
		},
		onShow() {
			this.getquerySnIdScreenshot()
		},
		methods: {
			getlongRangeControl(type) {
				let params = {
					userId: uni.getStorageSync('userId'),
					lastIp: uni.getStorageSync('Ip'),
					id: uni.getStorageSync('snId'),
					type: type
				}
				longRangeControl(params).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						icon: false
					}).catch(err => {
						this.$refs.uToast.show({
							title: err.msg,
							type: 'error',
							icon: false
						})
					})
				})
			},
			getrefresh() {
				this.getquerySnIdScreenshot(1)
				// this.linkSocket()
			},
			swiperChange(index) {
				this.swiperIndex = index
			},
			//获取屏幕锁定和截图
			getquerySnIdScreenshot(type) {
				querySnIdScreenshot({
					id: uni.getStorageSync('snId')
				}).then(res => {
					this.list = res.data.screenshot
					if (type) {
						this.$refs.uToast.show({
							title: '刷新成功',
							type: 'success',
							icon: false
						})
					}
				}).catch(err => {})
			},
			screenShot() {
				this.show = true
			},
			//截屏确定事件
			screenConfirm() {
				sendScreenshot({
					id: uni.getStorageSync('snId'),
					userId: uni.getStorageSync('userId'),
					lastIp: uni.getStorageSync('Ip')
				}).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						icon: false
					})
					this.getquerySnIdScreenshot()
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			//清除所有截图
			deleteConfirm() {
				deleteScreenshot({
					id: uni.getStorageSync('snId')
				}).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						icon: false
					})
					this.getquerySnIdScreenshot()
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			linkSocket() {
				//建立连接
				let that = this
				uni.connectSocket({
					url: "wss://zuoyebox.com.cn:3020",
					success() {
						that.initWebSocket()
					}
				})
			},
			initWebSocket() {
				let that = this
				//连接成功
				uni.onSocketOpen(function() {
					that.start()
					uni.sendSocketMessage({
						data: 'sn:' + uni.getStorageSync('snValue')
					})
				})
				//接收信息
				uni.onSocketMessage(function(res) {
					const redata = JSON.parse(res.data);
					if (redata.code == 200) {
						that.online = redata.online
					}
					that.reset()
				});
				//连接失败
				uni.onSocketError(function() {
					that.linkSocket()
				})
				//断开连接
				uni.onSocketClose(function(res) {
					console.log('WebSocket 已关闭！');
				});
			},
			close() {
				var that = this
				//清除时间
				clearTimeout(that.timeoutObj)
				clearTimeout(that.serverTimeoutObj)
			},
			reset() { //重置心跳
				var that = this;
				//清除时间
				clearTimeout(that.timeoutObj);
				clearTimeout(that.serverTimeoutObj);
				//重启心跳
				that.start();
			},
			start() { //开启心跳
			    return
				var that = this;
				that.timeoutObj && clearTimeout(that.timeoutObj);
				that.serverTimeoutObj && clearTimeout(that.serverTimeoutObj);
				that.timeoutObj = setTimeout(function() {
					that.reset()
					//这里发送一个心跳，后端收到后，返回一个心跳消息，
					console.log('-----心跳机制', 'sn:' + uni.getStorageSync('snValue'))
					uni.sendSocketMessage({
						data: 'sn:' + uni.getStorageSync('snValue')
					})
					that.serverTimeoutObj = setTimeout(function() {
						//超时关闭
						uni.closeSocket()
						that.close()
					}, that.timeout);
				}, that.timeout)
			}
		}
	}
</script>

<style scoped lang="scss">
	.screenshot {
		padding: 20rpx 40rpx;
		color: #000;

		image {
			width: 100%;
			height: 100%;
		}

		.imgs {
			height: 40rpx;
			width: 50rpx;
		}
	}

	.shot {
		// background-image: -webkit-linear-gradient(135deg, #ff512f 20%, #dd2476 100%);
		background-color: #f2f1f1;
	}

	.checkImg {
		width: 100%;
		margin-top: 20rpx;
		position: relative;

		.checkButton {
			position: absolute;
			// top: 20rpx;

			bottom: 10%;
			left: 50%;
			transform: translate(-50%, -10%);
			z-index: 999;
			font-weight: 600;
			font-size: 32rpx;
			color: #2979ff;
			letter-spacing: 4rpx;

			image {
				height: 50rpx;
				width: 50rpx;
			}
		}
	}

	.checkTime {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		z-index: 999;
		font-size: 32rpx;
		color: #000;
	}

	.screenshots {
		padding: 20rpx;

		.left {
			letter-spacing: 2px;

			.title {
				margin-bottom: 10rpx;
			}

			.txt {
				font-size: 16rpx;
			}
		}

		.right {
			text-align: right;
		}
	}

	.clear_btn {
		margin-top: 20rpx;
		font-size: 20rpx;
	}

	.refresh_btn {
		text-align: center;
		margin-top: 20rpx;
	}

	.textHiddens::before {
		content: " ";
		height: 22rpx;
		width: 22rpx;
		display: inline-block;
		border-radius: 50%;
		line-height: 26rpx;
		margin: 0 10rpx;
	}

	.green::before {
		background-color: #83de32;
	}

	.lines::before {
		background-color: #d2d6de;
	}
</style>
